import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
import { uniqueId } from 'lodash';
import { OptionItem } from '@iux/live';

@Component({
  selector: 'app-basic',
  templateUrl: './basic.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class BasicComponent implements OnInit {
  data: OptionItem[];
  selected: number;
  constructor() {}

  ngOnInit(): void {
    this.initData();
  }

  initData(): void {
    this.data = Array.from({ length: 10 }).map((item, key) => this.initUser(key));
    this.selected = 1;
  }

  initUser(key: number): OptionItem {
    const item = {
      id: uniqueId('uid'),
      key: key + 1,
      name: `user${key}`,
      age: 10 + key,
      random: parseInt(`${Math.random() * 100}`, 10),
    };

    return {
      key: item.id,
      value: item.key,
      label: item.name,
      isLeaf: true,
    };
  }

  change(value): void {
    console.log('change', value);
  }

  clear(): void {
    delete this.selected;
  }
}
